<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        #inputCaptcha {
            height: 30px;
            vertical-align: middle;
        }

        #verificationCodeImg {
            vertical-align: middle;
        }

        #checkCaptcha {
            height: 40px;
            width: 100px;
        }
    </style>
</head>

<body>


    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/login.css">
        <link rel="stylesheet" href="./css/common.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <style>
            #inputCaptcha {
                height: 40px;
                vertical-align: middle;
                width: 150px;
                /* border-radius: 5px; */
                border: gray solid 1px;
                border-radius: 5px;
            }

            #verificationCodeImg {
                vertical-align: middle;
                border-radius: 5px;
            }

            #confirm {
                margin-left: 45px;
            }

            .a {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>

    <body>
        <header>
            <div class="wel" style="margin-top:10px;">
                <h3>欢迎来到强哥图书管理系统</h3>
            </div>
            <nav>
                <ul id="nav-list" style=" margin-top:19px;"></ul>
                <!-- <ul style=" margin-top:19px; ">
                    
                    <li><a href="login.html">登录</a></li>
                    <li><a href="register.html">注册</a></li>
                    <li><a href="book_list.html">图书列表</a></li>
                    <li><a href="return_list.html">归还图书</a></li>
                    <li><a href="purchase.html">采购界面</a></li>
                    <li><a href="personal.html">个人中心</a></li>

                </ul> -->
            </nav>
        </header>

        <div class="container-login">
            <div class="container-pic">
                <img src="pic/computer.png" width="450px">
            </div>
            <div class="login-dialog">
                <h3>登陆</h3>
                <div class="row">
                    <span>用户名</span>
                    <input type="text" name="userName" id="userName" class="form-control">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" name="password" id="password" class="form-control">
                </div>
                <div id="confirm">
                    <span>验证码</span>
                    <input type="text" name="inputCaptcha" id="inputCaptcha" placeholder="输入验证码">
                    <img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？换一张" />
                </div>
                <div class="row">
                    <button type="button" class="btn btn-info btn-lg" onclick="handleLogin()" id="login">登录</button>
                </div>
                <div class="a">
                    <a href="/register.html" class="btn btn-link">没有账号？前去注册</a>
                </div>

            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script>
            var userRole = 'user';
            function checkRole(userRole, requiredRole) {
                return userRole === requiredRole || (userRole === 'admin' && requiredRole !== 'admin'); // 假设管理员可以看到所有内容
            }
            document.querySelectorAll('nav ul li').forEach(function (li) {
                var link = li.querySelector('a');
                if (link) {
                    var href = link.getAttribute('href');
                    if (href === 'book_list.html' && !checkRole(userRole, 'admin')) {
                        li.style.display = 'none';
                    } else if (href === 'return_list.html' && !checkRole(userRole, 'user')) {
                        li.style.display = 'none';
                    } else if (href === 'purchase.html' && !checkRole(userRole, 'purchaser')) {
                        li.style.display = 'none';
                    }
                    // 可以添加更多的条件来检查其他链接
                }
            });



            // 点击图片，重新加载验证码
            $("#verificationCodeImg").click(function () {
                $(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();
            });

            function handleLogin() {
                var captchaCode = $("#inputCaptcha").val();
                var userName = $("#userName").val();
                var password = $("#password").val();

                // 首先校验验证码
                $.ajax({
                    type: "post",
                    url: "/captcha/check",
                    data: {
                        captchaCode: captchaCode
                    },
                    success: function (captchaResult) {
                        console.log("loginResult: " + captchaResult);
                        if (captchaResult) {
                            // 验证码正确，进行登录操作
                            $.ajax({
                                url: "/user/login",
                                type: "post",
                                data: {
                                    userName: userName,
                                    password: password
                                },
                                success: function (loginResult) {

                                    console.log(loginResult.data);
                                    const dataString = JSON.stringify(loginResult.data);
                                    localStorage.setItem('loginData', dataString);
                                    const storedData = JSON.parse(localStorage.getItem('loginData'));
                                    console.log("storedData",storedData);
                                    console.log("loginResult",loginResult);
                                    if (loginResult) {
                                        if(loginResult.data == "user") {
                                            location.href = "book_list_B.html";
                                        }
                                        if(loginResult.data == "admin"){
                                            location.href = "book_list.html";
                                        }
                                       
                                    } else {
                                        alert(loginResult.errMsg || "登录失败");
                                    }

                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert("登录请求失败: " + textStatus);
                                }
                            });
                        } else {
                            // 验证码错误
                            alert("验证码错误");
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("验证码校验请求失败: " + textStatus);
                    }
                });
            }



        </script>
    </body>

</html>